<template>
	<view class="wrap">
		<!-- Picker -->
		<u-picker v-model="isShowPT" @confirm="PTContent" :range="PTs" mode="selector"></u-picker>
		<u-picker v-model="isShowSex" @confirm="SexContent" :range="SexList" mode="selector"></u-picker>
		<u-picker v-model="isShowbirth" @confirm="BirthContent"></u-picker>
		<u-picker v-model="isShowNation" @confirm="NationContent" :range="NationList" mode="selector" range-key="name"></u-picker>
		<u-picker v-model="isShowPA" @confirm="PAContent"  mode="region"></u-picker>
		<u-picker v-model="isShowCA" @confirm="CAContent"  mode="region"></u-picker>
		<u-form :model="user" :rules="rules" label-width="auto" ref="uForm">
			<u-form-item label="姓名" prop="name">
				<u-input v-model="user.name"  input-align="right"></u-input>
			</u-form-item>
			<u-form-item label="国籍" prop="nationality">
				<u-input v-model="user.nationality" disabled input-align="right"></u-input>
			</u-form-item>
			<u-form-item label="证件类型" prop="papersType">
				<u-input v-model="user.papersType" type="select" @click="isShowPT=true" input-align="right"></u-input>
			</u-form-item>
			<u-form-item label="证件号" prop="papersNum">
				<u-input v-model="user.papersNum" type="number"  inputAlign="right"></u-input>
			</u-form-item>
			<u-form-item label="性别" prop="sex">
				<u-input v-model="user.sex" type="select"  inputAlign="right" @click="isShowSex=true"></u-input>
			</u-form-item>
			<u-form-item label="出生日期" prop="birth">
				<u-input v-model="user.birth" type="select"  inputAlign="right" @click="isShowbirth=true"></u-input>	
			</u-form-item>
			<u-form-item label="手机号" prop="phoneNum">
				<u-input v-model="user.phoneNum" type="number"  inputAlign="right"></u-input>
			</u-form-item>
			<u-form-item label="民族" prop="nation">
				<u-input v-model="user.nation" type="select" inputAlign="right" @click="isShowNation=true"></u-input>
			</u-form-item>
			<u-form-item label="工作单位/学校" prop="workArea">
				<u-input v-model="user.workArea" inputAlign="right"></u-input>
			</u-form-item>
			<u-form-item label="证件地址" prop="papersAddress">
				<u-input v-model="user.papersAddress" inputAlign="right" type="select" @click="isShowPA=true"></u-input>
			</u-form-item>
			<u-form-item label="现居地址" prop="currentAddress">
				<u-input v-model="user.currentAddress" inputAlign="right" type="select" @click="isShowCA=true"></u-input>
			</u-form-item>
		</u-form>
		<u-button type="primary" style="margin-top: 40rpx;" @click="submit">确认提交</u-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user:{
					name:'',
					nationality:'中国',
					papersType:'居民身份证',
					papersNum:'',
					sex:'',
					birth:'',
					phoneNum:'',
					nation:'汉族',
					workArea:'',
					papersAddress:'',
					currentAddress:''
				},
				rules:{
					name: [
							{ 
								required: true, 
								message: '请输入姓名', 
								// 可以单个或者同时写两个触发验证方式 
								trigger: ['change','blur'],
							}
						],
					nationality: [
							{ 
								required: true, 
								message: '请输入国籍', 
								// 可以单个或者同时写两个触发验证方式 
								trigger: ['change','blur'],
							}
						],
					papersType: [
							{ 
								required: true, 
								message: '请选择证件类型', 
								// 可以单个或者同时写两个触发验证方式 
								trigger: ['change','blur'],
							}
						],
					papersNum: [
							{ 
								required: true, 
								message: '请输入证件号', 
								// 可以单个或者同时写两个触发验证方式 
								trigger: ['change','blur'],
							},
							{
								len:18,
								type:"number",
								message:'请输入正确的身份证号',
								trigger:['blur']
							}
						],
					sex: [
							{ 
								required: true, 
								message: '请输入性别', 
								// 可以单个或者同时写两个触发验证方式 
								trigger: ['change','blur'],
							}
						],
					birth: [
							{ 
								required: true, 
								message: '请输入生日', 
								// 可以单个或者同时写两个触发验证方式 
								trigger: ['change','blur'],
							}
						],
					phoneNum: [
							{ 
								required: true, 
								message: '请输入手机号', 
								// 可以单个或者同时写两个触发验证方式 
								trigger: ['change','blur'],
							},
							{
								len:11,
								type:'number',
								message:'请输入正确的手机号',
								trigger:['blur']
							}
						],
					nation: [
							{ 
								required: true, 
								message: '请输入民族', 
								// 可以单个或者同时写两个触发验证方式 
								trigger: ['change','blur'],
							}
						],
					papersAddress: [
							{ 
								required: true, 
								message: '请输入证件地址', 
								// 可以单个或者同时写两个触发验证方式 
								trigger: ['change','blur'],
							}
						],
					currentAddress: [
							{ 
								required: true, 
								message: '请输入当前地址', 
								// 可以单个或者同时写两个触发验证方式 
								trigger: ['change','blur'],
							}
						],
					workArea:[
						{
							required:true,
							message:'请输入工作单位/学校',
							trigger:['change','blur']
						}
					]
					
				},
				isShowPT:false,
				PTs:['居民身份证','居民户口薄','护照','军官证','驾驶证','其他法定有效证件'],
				isShowSex:false,
				SexList:['男','女'],
				isShowbirth:false,
				isShowNation:false,
				NationList:[{id:1 ,name:'汉族'},
							{id:2 ,name:'蒙古族'},
							{id:3 ,name:'回族'},
							{id:4 ,name:'藏族'},
							{id:5 ,name:'维吾尔族'},
							{id:6 ,name:'苗族'},
							{id:7 ,name:'彝族'},
							{id:8 ,name:'壮族'},
							{id:9 ,name:'布依族'},
							{id:10,name:'朝鲜族'},
							{id:11,name:'满族'},
							{id:12,name:'侗族'},
							{id:13,name:'瑶族'},
							{id:14,name:'白族'},
							{id:15,name:'土家族'},
							{id:16,name:'哈尼族'},
							{id:17,name:'哈萨克族'},
							{id:18,name:'傣族'},
							{id:19,name:'黎族'},
							{id:20,name:'傈僳族'},
							{id:21,name:'佤族'},
							{id:22,name:'畲族'},
							{id:23,name:'高山族'},
							{id:24,name:'拉祜族'},
							{id:25,name:'水族'},
							{id:26,name:'东乡族'},
							{id:27,name:'纳西族'},
							{id:28,name:'景颇族'},
							{id:29,name:'柯尔克孜族'},
							{id:30,name:'土族'},
							{id:31,name:'达翰尔族'},
							{id:32,name:'么佬族'},
							{id:33,name:'羌族'},
							{id:34,name:'布朗族'},
							{id:35,name:'撒拉族'},
							{id:36,name:'毛南族'},
							{id:37,name:'仡佬族'},
							{id:38,name:'锡伯族'},
							{id:39,name:'阿昌族'},
							{id:40,name:'普米族'},
							{id:41,name:'塔吉克族'},
							{id:42,name:'怒族'},
							{id:43,name:'乌孜别克族'},
							{id:44,name:'俄罗斯族'},
							{id:45,name:'鄂温克族'},
							{id:46,name:'德昂族'},
							{id:47,name:'保安族'},
							{id:48,name:'裕固族'},
							{id:49,name:'京族'},
							{id:50,name:'塔塔尔族'},
							{id:51,name:'独龙族'},
							{id:52,name:'鄂伦春族'},
							{id:53,name:'赫哲族'},
							{id:54,name:'门巴族'},
							{id:55,name:'珞巴族'},
							{id:56,name:'基诺族'},],
							
				isShowCA:false,
				isShowPA:false,
			}
				
		},
		methods:{
			PTContent(e){
				this.user.papersType = this.PTs[e[0]]
			},
			SexContent(e){
				this.user.sex = this.SexList[e[0]]
			},
			BirthContent(e){
				this.user.birth = e.year + '-' + e.month + '-' + e.day
			},
			NationContent(e){
				this.user.nation = this.NationList[e[0]].name
			},
			PAContent(e){
				this.user.papersAddress = e.province.label + e.city.label + e.area.label
			},
			CAContent(e){
				this.user.currentAddress = e.province.label + e.city.label + e.area.label
			},
			submit(){
				this.$refs.uForm.validate(valid => {
					if (valid) {
						uni.setStorage({
							key:'username',
							data:this.user
						})
						uni.navigateTo({
							url:'/pages/yimiaotips/yimiaotips'
						})
					} else {
						uni.showToast({
							title:'请完善表单',
							icon:'none',
						})
					}
				});
			}
		},
		onReady() {
				this.$refs.uForm.setRules(this.rules);
		},
	}
</script>

<style lang="scss" scoped>
.wrap {
	padding: 30rpx;
}
</style>
